<template>
  <div class="demo1">
    <HeaderBox />
    <div class="main_box">
      <div class="mian_item">
        <PanelBox>
          <!-- 左1 -->
          <LeftOne />
        </PanelBox>

        <PanelBox>
          <!-- 左2 -->
          <LeftTwo />
        </PanelBox>

        <PanelBox>
          <!-- 左3 -->
          <LeftThree />
        </PanelBox>
      </div>
      <div class="mian_item">
        <!-- 中间数据展示 -->
        <ShowData />
        <!-- 地图 -->
        <MapArea />
      </div>
      <div class="mian_item">
        <PanelBox>
          <!-- 右1 -->
          <RightOne />
        </PanelBox>

        <PanelBox>
          <!-- 右2 -->
          <RightTwo />
        </PanelBox>

        <PanelBox>
          <!-- 右3 -->
          <RightThree />
        </PanelBox>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderBox from "./components/headerBox.vue";
import PanelBox from "./components/panelBox.vue";
import ShowData from "./components/showData.vue";
import MapArea from "./components/mapArea.vue";
import LeftOne from "./components/leftOne.vue";
import LeftTwo from "./components/leftTwo.vue";
import LeftThree from "./components/leftThree.vue";
import RightOne from "./components/rightOne.vue";
import RightTwo from "./components/rightTwo.vue";
import RightThree from "./components/rightThree.vue";
export default {
  data() {
    return {};
  },
  components: {
    HeaderBox,
    PanelBox,
    ShowData,
    MapArea,
    LeftOne,
    LeftTwo,
    LeftThree,
    RightOne,
    RightTwo,
    RightThree,
  },
};
</script>

<style lang="less" scoped>
.demo1 {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: url("../../assets/demo1/bg.jpg") no-repeat top center;

  .main_box {
    flex: 1;
    display: flex;
    padding: 10px 10px 0 10px;
    color: #fff;
    box-sizing: border-box;

    .mian_item {
      flex: 3;

      &:nth-child(2) {
        display: flex;
        flex-direction: column;
        flex: 5;
        margin: 0 10px 15px 10px;
      }
    }
  }
}
</style>